import React from 'react'

import './index.scss'
import {withRouter} from 'next/router'
// 引入head组件
import Head from 'next/head'
// 顶部组件
import TopNavigation from '../../../components/topNavigation'
// 案例信息
import CaseInfo from './caseInfo'
// 评价
import CaseEvaluation from './caseEvaluation'
// 右侧导航
import Navigation from "../../../components/navigation";

import {getHeadAndTailData, getProjectDetails} from '../../../api/api'
// redux 数据
import store from '../../../store'

 class CaseDetails extends React.Component{

    static getDerivedStateFromProps(nextProps){
        let projectData = nextProps.projectData
        return {
            projectData
        }
    }
    static async  getInitialProps({query}){
        // 获取项目案例分类
        const projectDetails = await getProjectDetails(query.id)
        // 底部数据
        let footerData = await getHeadAndTailData()
        return{
            footerData: footerData.data,
            projectDetails
        }
    }

    constructor(props) {
        super(props);
        let {remUrl} = store.getState()
        this.state = {
            // 控制右侧侧边栏展示隐藏
            displayNav: false,
            navFrag:true,
            remUrl
        }
    }
    render() {
        return (
            <>
                <Head>
                    <meta charSet='utf-8'/>
                    <title>{this.props.footerData.info.case_details_title}</title>
                    <meta name="keywords" content={this.props.footerData.info.case_details_keywords} />
                    <meta name="description" content={this.props.footerData.info.case_details_description}/>
                    <link rel="icon" href={this.props.footerData.web_icon}/>
                    <script src={this.state.remUrl}></script>
                </Head>
                <div className='case_details' onClick={this.downDisplayNav.bind(this)}>
                    {/*顶部返回*/}
                    <TopNavigation title={'caseDetails'}  changeDisplayNav={this.changeDisplayNav.bind(this)}/>
                    {/*案例信息*/}
                    <CaseInfo projectDetails={this.props.projectDetails.data} />
                    {/*轮播区域*/}
                    {/*<div className='caseSwiper'>*/}
                    {/*</div>*/}
                    {/*评价*/}
                    <CaseEvaluation projectDetails={this.props.projectDetails.data}/>
                    {/*右侧导航*/}
                    <Navigation navFrag={this.state.navFrag} displayNav={this.state.displayNav} />
                </div>
            </>

        );
    }
     downDisplayNav(){
         this.state.displayNav && (
             this.setState({
                 displayNav: false
             })
         )
     }
    changeDisplayNav(){
        this.setState({
            displayNav: !this.state.displayNav,
            navFrag: false
        })
    }
}

export default withRouter(CaseDetails)